<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.绘制线条</title>
    <style>
        body>* {
            margin-left: 40px;
        }
        canvas{
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
<script>
    window.onload=function () {
        var cans= document.getElementById('canvas');
        cans.width=400;
        cans.height=400;
        cans.style.background='#eee';

        var context= cans.getContext('2d');

        //**开始新路径 / 绘制设置
        context.beginPath();
        context.moveTo(10,0);           //路径--起点
        context.lineTo(100,50);         //路径--下一个点
        context.lineTo(10,100);
        context.lineWidth=1;            //宽度-px
        context.strokeStyle='#333';    //颜色，stroke描边
        //**确认绘制：描边
        context.stroke();

    }
</script>
</body>
</html>